<script setup lang="ts">
// 个人信息的类型
interface Response {
  message: string
  data: LoginResult
}
interface LoginResult {
  id: string
  name: string
  photo: string
  gender: number
  birthday: string
  real_name: string
  intro: string
}
// post 类型
interface HttpRequestData {
  name: string
  gender: string
  birthday: string
  real_name: string
  intro: string
}

import axios from 'axios'
import { onMounted, ref } from 'vue'
import { showToast } from 'vant'
const request = axios.create({
  baseURL: 'https://geek.itheima.net/',
})
// 请求拦截器
request.interceptors.request.use(
  (config) => {
    try {
      config.headers.Authorization = `Bearer d6f63f2e-58ca-4ab9-9184-ec571aa8635f`
      // 1
      config.headers['Content-Type'] = `multipart/form-data`
      // 2
      // config.headers['Content-Type'] = `multipart/form-data`
      // config.headers['Content-Type'] = `boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW`
      // 3
      // config.headers['Content-Type'] = `multipart/form-data;boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW`
    } catch {
      console.log('失败')
    }
    return config
  },
  (err) => {
    Promise.reject(err)
  },
)
const result = ref<LoginResult>()
// 获取自己的信息
const method = async () => {
  const res = await request.get<Response>('v1_0/user/profile')
  result.value = res.data.data
}
// 执行方法
onMounted(method)

// 修改个人信息
const update = async () => {
  const res = await request.patch<HttpRequestData>('v1_0/user/profile', {
    name: result.value?.name,
    gender: result.value?.gender,
    birthday: result.value?.birthday,
    real_name: result.value?.real_name,
    intro: result.value?.intro,
  })
  console.log(res)
}

// 转成男女
const genderStr = ref<string>()
const gender = () => {
  if (result.value?.gender == 1) {
    genderStr.value = '女'
  } else {
    genderStr.value = '男'
  }
}
// 执行方法
onMounted(gender)
const show = ref(false)
const show2 = ref(false)
const showPopup = () => {
  show.value = true
}
const showPopup2 = () => {
  show2.value = true
}
// 返回
const onClickLeft = () => {
  show.value = false
  show2.value = false
}
//提交

const onClickRight = async () => {
  await update()
  show.value = false
  show2.value = false
}
// 男女选择
const columns = [
  { text: '男', value: '0' },
  { text: '女', value: '1' },
]
const onConfirm = async (data: { selectedValues: string[] }) => {
  result.value!.gender = Number(data.selectedValues)
  await update()
  gender()
  showPicker.value = false
}
const pickerValue = ref<string[]>([])
const showPicker = ref(false)
// 生日选择
const currentDate = ref(['2024', '12', '12'])
const minDate = new Date(1990, 0, 1)
const maxDate = new Date(2025, 5, 1)
const showDatePicker = ref(false)
const dateConfirm = async (data: { selectedValues: string[] }) => {
  showToast({ message: `${data.selectedValues.join('-')}` })
  result.value!.birthday = data.selectedValues.join('-')
  await update()
  showDatePicker.value = false
}

import b64ToBlob from 'b64-to-blob'
import { showLoadingToast, type ActionSheetAction } from 'vant'

// 1. 修改头像
// 1.1 控制修改头像弹层的显示/隐藏
const showAvatarSheet = ref(false)
// 1.2 打开相册/相机
const onSelectAvatar = async (item: ActionSheetAction, i: number) => {
  if (i === 0) {
    try {
      // 相册上传
      const data = await mk.pickerPhoto()
      // await onUpdateAvatar(data)
      showAvatarSheet.value = false
      showLoadingToast({ message: '正在上传', duration: 0, forbidClick: true })
      const image = b64ToBlob(data, 'image/jpeg')
      const fd = new FormData()
      fd.append('photo', image, Date.now() + '.jpeg')
      // showToast({ message: '123' })
      const res = await request.patch('v1_0/user/photo')
      console.log(res)
      showToast({ message: '上传成功' })
    } catch (err) {
      console.log(err)
      showToast({ message: '上传失败' })
    }
  } else if (i === 1) {
    // 拍照上传
    const data = await mk.pickerCamera()
    // await onUpdateAvatar(data)
  }
}
// 1.3 头像上传
// 1.3 头像上传
// const onUpdateAvatar = async (data: string) => {
//   console.log(data)
//   showToast({ message: data })
//   try {
//     showAvatarSheet.value = false
//     showLoadingToast({ message: '正在上传', duration: 0, forbidClick: true })
//     const image = b64ToBlob(data, 'image/jpeg')
//     const fd = new FormData()
//     fd.append('file', image, Date.now() + '.jpeg')
//     // showToast({ message: '123' })
//     console.log(fd)
//     // const res = await request.patch('v1_0/user/photo')
//     // profile.value.avatar = URL.createObjectURL(image)
//     // result.value!.photo = URL.createObjectURL(image)
//     // const user = mk.queryUser()
//     // user.photo = res.data.data.photo
//     // mk.updateUser(user)
//     // showToast(res.data.message)
//     showToast({ message: '上传成功' })
//   } catch (err) {
//     console.log(err)
//     showToast({ message: '上传失败' })
//   }
// }
</script>

<template>
  <van-popup v-model:show="showDatePicker" destroy-on-close round position="bottom">
    <van-date-picker
      v-model="currentDate"
      title="选择生日"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="dateConfirm"
    />
  </van-popup>

  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
    <van-picker
      :model-value="pickerValue"
      :columns="columns"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
  <!-- <van-picker :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" /> -->

  <!-- 昵称修改 -->
  <van-popup v-model:show="show" position="right" :style="{ width: '100%', height: '100%' }">
    <van-nav-bar
      title="编辑信息"
      left-arrow
      @click-left="onClickLeft"
      right-text="提交"
      @click-right="onClickRight"
    />
    <!-- 可以使用 CellGroup 作为容器 -->
    <van-cell-group inset>
      <van-field v-model="result!.name" placeholder="请输入用户名" />
    </van-cell-group>
  </van-popup>

  <!-- 简介修改 -->
  <van-popup v-model:show="show2" position="right" :style="{ width: '100%', height: '100%' }">
    <van-nav-bar
      title="编辑信息"
      right-text="提交"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <!-- 可以使用 CellGroup 作为容器 -->
    <van-cell-group inset>
      <van-field v-model="result!.intro" placeholder="请输入用户名" />
    </van-cell-group>
  </van-popup>

  <div class="page">
    <!-- 导航头 -->
    <div class="myHead">
      <img class="back" src="../../public/images/back.svg" alt="" />
      <span>个人信息</span>
    </div>
    <div class="avator" @click="showAvatarSheet = true">
      <span>头像</span> <img :src="result?.photo" alt="" /><img
        src="../../public/images/right.svg"
        alt=""
      />
    </div>

    <van-action-sheet
      v-model:show="showAvatarSheet"
      :actions="[{ name: '相册' }, { name: '拍照' }]"
      @select="onSelectAvatar"
      cancel-text="取消"
      :style="{ paddingBottom: '20px' }"
    ></van-action-sheet>
    <!-- 昵称 -->
    <div class="nickName">
      <span class="name">昵称</span>
      <span @click="showPopup">{{ result?.name }}</span>

      <img src="../../public/images/right.svg" alt="" />
    </div>
    <!-- 简介 -->
    <div class="nickName">
      <span class="name">简介</span>
      <span @click="showPopup2">{{ result?.intro }}</span>
      <img src="../../public/images/right.svg" alt="" />
    </div>
    <!-- 分割 -->
    <p class="pp"></p>
    <!-- 性别 -->
    <div class="nickName">
      <span class="name">性别</span>

      <span @click="showPicker = true">{{ genderStr }}</span>
      <img src="../../public/images/right.svg" alt="" />
    </div>
    <!-- 生日 -->
    <div class="nickName">
      <span class="name">生日</span>
      <span @click="showDatePicker = true">{{ result?.birthday.slice(0, 10) }}</span>
      <img src="../../public/images/right.svg" alt="" />
    </div>
  </div>
</template>

<style lang="css" scoped>
.page {
  margin-left: 0px;
  box-sizing: border-box;
  padding-top: 10px;
  margin-left: -7px;
  margin-right: -7px;
  color: rgb(59, 58, 58);
}
.pp {
  box-sizing: border-box;
  height: 20px;
  background-color: rgb(237, 235, 232);
}
.back {
  width: 30px;
}
.myHead {
  margin-top: 10px;
  padding-left: 10px;
  width: 100%;
  height: 10vw;
  display: flex;
  align-items: center;
}
.myHead span {
  font-size: 20px;
  padding-right: 40px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}
.avator {
  width: 100%;
  font-size: 18px;
  display: flex;
  padding-left: 10px;
  padding-top: 20px;
  box-sizing: border-box;
  border-bottom: 0.1px solid rgb(233, 233, 233);
  padding-bottom: 5px;
}
.avator span {
  flex: 1;
}
.avator img {
  width: 30px;
  height: 30px;
  padding-right: 10px;
  border-radius: 15px;
}

.nickName {
  width: 100%;
  font-size: 18px;
  display: flex;
  padding-left: 10px;
  padding-top: 20px;
  box-sizing: border-box;
  border-bottom: 0.1px solid rgb(233, 233, 233);
  padding-bottom: 5px;
}
.nickName img {
  width: 30px;
  padding-right: 10px;
}
.name {
  flex: 1;
}
.water {
  padding: 20px;
  width: 80%;
  font-size: 22px;
  display: flex;
  justify-content: space-between;
}
.water img {
  width: 30px;
}
.orange {
  color: rgb(212, 83, 40);
}
.van {
  background-color: rgb(244, 245, 246);
  border-radius: 10px;
  height: 100px;
  width: 90%;
  display: flex;
  flex: 1;
  justify-content: center;
  margin-left: 10px;
  box-sizing: border-box;
}
.gray {
  background-color: rgb(244, 245, 246);
}

.van-field {
  height: 100px;
  background-color: rgb(242, 242, 242);
  font-size: 22px;
}
.van-nav-bar {
  --van-nav-bar-text-color: rgb(221, 106, 29);
  --van-nav-bar-icon-color: black;
  --van-nav-bar-title-font-size: 20px;
  --van-nav-bar-height: 50px;
  --van-nav-bar-arrow-size: 25px;
  --van-nav-bar-z-index: 2;
}
</style>
